<template>
	<view class="create-box">
		<view class="list-null-box" v-if="goodsList.length==0">
			<img src="https://file.casugn.com/storecompcard/temp/空页面@2x(11)_1681113828976.png" alt="">
			<view class="list-null-text">
				暂无店铺
			</view>
			<view class="list-null-add" @click="addShopClick">
				去添加店铺
			</view>
		</view>
		<!-- 创建优惠券 -->
		<view v-for="(item, index) in goodsList" :key="index" class="goods-item">
			<view class="image-wrapper">
				<image
					:src="item.photo==null?'https://file.casugn.com/storecompcard//4T4oGCfkpPX5a59439bdbafef1bd4ed417e476813128_1660543910299.png':item.photo"
					mode="aspectFill"></image>
			</view>
			<view class="btn-wrap" @tap="toStore(item)">
				<view class="title">
					<text class="">{{item.name}}</text>
				</view>
				<view class="created-btn-box">
					<view class="created-btn" @tap.stop="toCreateCoupon(item)">
						生成店铺券
						<!-- <u-button type="primary" color='linear-gradient(90deg, #4538ff 0%, #79a8ff 100%)'  text="生成店铺券" @tap.stop="toCreateCoupon(item)"></u-button> -->
					</view>
					<view class="created-btn created-btn2" @tap.stop="toStore(item)">
						进入店铺
						<!-- <u-button type="primary" color='linear-gradient(90deg, #4538ff 0%, #79a8ff 100%)'  text="进入店铺" @tap.stop="toStore(item)"></u-button> -->
					</view>
				</view>

			</view>
			<!-- <text class="title clamp">{{item.name}}</text> -->
		</view>


		<u-popup :show="popShow" mode="bottom" :round="16" @close="close" closeable="true" closeOnClickOverlay="true"
			class="pop-show">
			<view class="pop-box">
				<u--form labelPosition="left" :model="userInfos" labelWidth="200" :rules="rules">
					<u-form-item label="名称" prop="couponName" borderBottom required class='formItemWp'>
						<u--input v-model="userInfos.couponName" type="text" clearable border="none"
							placeholder='优惠券名称'></u--input>
					</u-form-item>
					<u-form-item label="数量" prop="publishNum" borderBottom required class='formItemWp'>
						<u--input v-model="userInfos.publishNum" type="number" clearable border="none"
							placeholder='优惠券数量'></u--input>
					</u-form-item>
					<u-form-item label="有效期" prop="cycle" borderBottom required class='formItemWp'>
						<u--input v-model="userInfos.cycle" type="number" clearable border="none"
							placeholder='优惠券有效期/天'></u--input>
					</u-form-item>
					<u-form-item label="满减金额" prop="limitQuota" borderBottom required class='formItemWp'>
						<u--input v-model="userInfos.limitQuota" type="number" clearable border="none"
							placeholder='限制金额'></u--input>
					</u-form-item>
					<u-form-item label="满减优惠" prop="publishValue" borderBottom required class='formItemWp'>
						<u--input v-model="userInfos.publishValue" type="number" clearable border="none"
							placeholder='优惠券金额'></u--input>
					</u-form-item>
				</u--form>
				<view class="pop-submit">
					<view class="pop-confirm">
						<u-button @click="couponSubmit" type="primary">生成</u-button>
					</view>
					<!-- <view class="pop-cancle">
						<u-button @click="popShow=false" type="error">取消</u-button>
					</view>
 -->

				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList: [],
				popShow: false,
				openId: '',
				userInfos: {
					id: '',
					goodsIds: '',
					openId: '',
					couponName: '',
					publishNum: '',
					cycle: '',
					limitQuota: '',
					publishValue: '',
					useType: 1,
				},
				rules: {
					couponName: {
						type: 'string',
						required: true,
						message: '请填写优惠券名称',
						trigger: ['blur', 'change']
					},
					publishNum: {
						type: 'number',
						required: true,
						message: '请填写优惠券数量',
						trigger: ['blur', 'change']
					},
					cycle: {
						type: 'number',
						required: true,
						message: '请填写优惠券有效期',
						trigger: ['blur', 'change']
					},
					limitQuota: {
						type: 'number',
						required: true,
						message: '请填写限制金额',
						trigger: ['blur', 'change']
					},
					publishValue: {
						type: 'number',
						required: true,
						message: '请填写优惠券金额',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onShow() {
			let openId = uni.getStorageSync('openId')
			console.log("这是openId", openId)
			// this.unionId = openId.unionid
			this.openId = openId.openid
			this.goodsList = []
			this.getMyStore()
		},
		methods: {
			// 添加店铺
			addShopClick() {
				uni.navigateTo({
					url: '/pagesBusiness/shopList/shopList'
				})
			},
			close() {
				this.popShow = false
				this.userInfos.couponName = ''
				this.userInfos.publishNum = ''
				this.userInfos.cycle = ''
				this.userInfos.limitQuota = ''
				this.userInfos.publishValue = ''
			},
			// 获取我的门店
			getMyStore() {
				let openId = uni.getStorageSync('openId')
				console.log("这是openId", openId)
				this.$api.getMyShop(openId.openid, 0).then(res => {
					console.log(res)
					if (res.success) {
						console.log('我的店铺结果', res.result);
						this.goodsList = res.result.records
					}
				})
			},
			//生成店铺券
			toCreateCoupon(item) {
				console.log(item)
				console.log(item)
				this.popShow = true
				this.userInfos.id = item.id
				this.userInfos.openId = this.openId
			},
			// 进入店铺
			toStore(item) {
				uni.navigateTo({
					url: '/pagesBusiness/createConponList/createConponList?storeId=' + item.storeId + '&id=' + item
						.id
				})
			},

			couponSubmit() {
				if (this.userInfos.couponName == '') {
					uni.showToast({
						title: "优惠券名称不能为空！",
						icon: 'none'
					});
					return false
				}
				if (this.userInfos.publishNum == '') {
					uni.showToast({
						title: "优惠券数量不能为空！",
						icon: 'none'
					});
					return false
				}
				if (this.userInfos.cycle == '') {
					uni.showToast({
						title: "优惠券有效期不能为空！",
						icon: 'none'
					});
					return false
				}
				if (this.userInfos.limitQuota == '') {
					uni.showToast({
						title: "限制金额不能为空！",
						icon: 'none'
					});
					return false
				}
				if (this.userInfos.publishValue == '') {
					uni.showToast({
						title: "优惠券金额不能为空！",
						icon: 'none'
					});
					return false
				}
				this.$api.createGoodsCoupon(this.userInfos).then(res => {
					if (res.success) {
						uni.showToast({
							title: "生成优惠券成功！",
							icon: 'none'
						});
						this.popShow = false
					} else {
						uni.showToast({
							title: "生成优惠券失败！",
							icon: 'none'
						});
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #F7F8FA;
	}

	.create-box {
		padding: 32upx;
		background: #F7F8FA;

		.list-null-box {
			width: 240upx;
			height: 82vh;
			margin: 0upx auto;
			text-align: center;
			font-size: 26upx;
			margin-top: 240rpx;

			img {
				width: 240rpx;
				height: 240rpx;
			}

			.list-null-text {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #86909C;
				line-height: 39rpx;
				margin-top: 16rpx;
			}

			.list-null-add {
				width: 176rpx;
				height: 64rpx;
				background: #276AEE;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				color: white;
				line-height: 64rpx;
				margin: 0 auto;
				margin-top: 16rpx;
			}
		}

		.goods-item {
			// border-radius: 10upx;
			// box-shadow: 0px 0px 5px 1px rgba(154, 154, 154, 0.4);
			display: flex;
			justify-content: flex-start;
			margin-bottom: 24upx;
			background: #ffffff;
			overflow: hidden;
			padding-bottom: 24rpx;

			.image-wrapper {
				width: 160upx;
				height: 160upx;
				text-align: center;
				margin-top: 24rpx;
				margin-left: 24rpx;

				image {
					width: 160upx;
					height: 160upx;
				}
			}

			.btn-wrap {
				margin-left: 24upx;

				.title {
					font-size: 28rpx;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					color: #000000;
					line-height: 39rpx;
					margin-top: 24upx;
				}

				.created-btn-box {
					margin-top: 64upx;
					display: flex;

					.created-btn {
						width: 204rpx;
						height: 56rpx;
						background: #276AEE;
						border-radius: 200rpx 200rpx 200rpx 200rpx;
						opacity: 1;
						border: 2rpx solid #276AEE;
						text-align: center;
						color: white;
						line-height: 56rpx;
						font-size: 28rpx;
					}

					.created-btn2 {
						background: #E9F0FD;
						color: #276AEE;
						margin-left: 46rpx;
					}
				}

			}
		}
	}

	// 弹出框
	.pop-box {
		padding: 50upx;

		.formItemWp {
			height: 108rpx;
		}

		.pop-submit {
			display: flex;
			justify-content: space-around;
			margin-top: 80upx;

			.pop-confirm {
				width: 686rpx;
				height: 88rpx;
			}

			.pop-cancle {
				width: 200upx;
				margin-left: 20upx;
			}
		}
	}
</style>
